} 1 


سور عر مفر لبا 


شرح مبسط لأساسيات لغة 1۲01 


بسم لله و (لصلاة والسلام على سیدنا مدمد و(له وصتبه (جمعین 


تصرين 


Internet programming 


صمم موقع يعرض صور عن مد ليبيا ( تخزن صفحة ]1M1‏ تحت اسم راذع) به : 


1- شریط متحرك ذو خلفیه " 9932€٣€‏ " ولون خط " ۴۳7۴۳۹0 " وحجم خط 2+ 
مکتوب فيه اسمڪ ورقمڪ الدراسى. 
غير لون خلفية الصفحه لتصبح " AZURE‏ ". 
اكتب في منتصف الصفحه عنوان " السلام عليكم ورحمة الله " بحجم 13 وتحته خط. 


اكتب عنوان في منتصف الصفحه "مدن ليبيا " بلون خط "٥ں‏ kK8[1آامD‏ " وحجم خط 15 


علي يمين الصفحه وبخط مائل حجمه 2+ ولونه "006400" اڪتب الجمله الاتيه "يمکنڪ 

في هذا الموقع مشاهدة صور عن مدن ليبيا :" . 

علي يمين الصفحه اكتب عنوان "مدينة درنه " بحجم 13 تحت العنوان وعلي اليمين ضع 

صوره "من المستندات" بعرض 200 ×آم وبطول 100 ×آم . 

علي يمين الصفحه اكتب عنوان "مدينة البيضاء " بحجم 13 تحت العنوان وعلي اليمين 
ضع صوره "من المستندات" ذات اطار حجمه 5 واختار الطول والحجم المناسب . 
علي يمين الصفحه اكتب عنوان "مدينة طبرق " بحجم 13 تحت العنوان وعلي اليمين ضع 
صوره "من المستندات" بعرض 200 ×آم وبطول 100 ×أم . 

9- اكتب اليوم والتاريخ وضعه في المنتصف مع اختيار لون وحجم مناسب . 


0- انش صفحة H1 M1‏ تحمل اسم Libya‏ . 


1-اجعل خلفية الصفحه ه۲[ صوره من اختيارك . 


2- ار جع الي الصفحه ٤٥1¥‏ وضع رابط ينقلك الي الصفحه 1.104 وليكن اسمه " الذهاب الي 


الصفحه التاليه ". 


ر رک ت کی کی کی کک 


<html> 

<head> 

< 118ا />صور عن مدن لیا <ع]اانا> 

</head> 

<body bgcolor= azure > 

<marquee bgcolor=#9932CC><font size=+2 color=# FF7F5O0> pul 
2000 </font> </marquee> 

<h3><u><p align=center> aأا السلام عليكم ورحمة‎ <>/p< >/u< >/ 13< 
<h5><font color= DarkBlue><p align=center> lul jına </p> 
</font> </h5> 

يمكنڪك في هıi <font size=+2 color=#006400><p align=right> <i>‏ 
<ا0n/>‏ <م/> <1/> الموقع مشاهدة صور عن مدن ليبيا 

<h3><p align=right> aنiرد‎ aiıın</pþ> </h3> 

<img src=der.jpg align=right height=100 width=200> 
<h3><p align=right> ء«lضيبll‎ aiıın</þ> </hN3> 

<img src=kof.jpg border=5 align=right height=100 width=200> 
<h3><p align=righİ> aربط¦‎ aiııم</pþ>‎ </h13> 

<img src=tob.jpg align=right height=100 width=200> 
<br><br> <br><br> <br> 

<p align = center><font color=#AG32CC size=+1>2010/10/19 الخميس‎ 
</font> </p> 

</body> 

</html> 


2- من قائمة ملف في المفكره نختار "حفظ باسم "ونحفظه باسم وامتداد اصاط.راذc‏ . 


فتظهر ايقونه في مكان التخزين بهذا الشكل اھا مہ د 


3- ايضا لاننسى تخزين صفحة آ٤‏ والصور (صور المدن) المتعلقه بها في نفس المكان 
ويفضل وضعها في مجلد واحد. 


<html> 

<head> 

>t] ۴< خريطة‎ >/اiا[ه<‎ 

</head> 

<body bgcolor= beige > 

<img src=lib.jpg height=100% width=100% border=5> 
</body> 


</html> 


5- من قائمة ملف في المفكره نختار "حفظ باسم "ونحفظه باسم وامتداد ۸۳"1.هy4‏ ط11 فتظهر 


ايقونه في مكان التخزين بهذا الشكل © نفتحها ونشاهد. 


€ lı ûhرè‎ - Windows Intemet Explorer 
(J E CNUsersalmontasen Desktop\sitellibya.html - |+| x |S sig 
3 v1 خریطڈ لبا ا‎ ME 7H @ ~ Pager Safely” Tools @- 


1 1 
Done JÎ Computer | Protected Mode: Off A > R120% 
ê EEE E Tbe 

6-نعود الي صفحة آ٣‏ وذلك لغرض اضافة رابط ينقلك الي صفحة 1104ء لفعل ذلڪ ننقر 

المفكره" »فيعرض الكود الخاص بالصفحه 


نضيف الرايط الذي يحمل اسم "الذهاب الي الصفحه التاليه" .كلاتي 


بلايمن علي صفحة أ[ › ونختار "فتح باستخدام" ثم ' 


<p align=center> <font color=#AG32CC size=+1>2010/10/19 الخميس‎ 
</font> </p> 

<a href=1ibya. ht 1l> aيJlتلا <ك/>الذهاب الي الصفحه‎ 

</body> 

</html> 


2 صور عن عفن ایبیا‎ - Windows [ntenet Explorer 


e ت‎ BH C\Userstalmontaser\Desktop\site\city.html ¥ 1 ¥ 1 4 | ك‎ Bing 2> 


qt Favorites | & ھور عن مین لپیا‎ | E - MA” ih ¥ PageY Safety ¥ Tools ¥ @- ا‎ 


الخميس 2010/10/19 
الذهاب الى السفحه التاليه 


|i Computer | Protected Mode: Off 


وبهذا نكون قد اكملنا المطلوب منا. 


<html> 
ومن المعروف ان لكل‎ ۸١1 ويسمى وسم بداية‎ 1١1 هذا الوسم يدل المتصفح علي بداية ملف‎ 
وسم بدايه ونهایه.‎ 

<head> 


يمتال هذا الوسم الجزء الاول من ملف |1۳1 » وهو يحمل تفاصيل والتعاريف الخاصه بالصفحه. 


<٥1اiا/>‏ صور عن مدن تیبیا <e][ا1ا>‏ 

اما هذا الوسم يستخدم في وضع عنوان لصفحة 1)۳1 » وناتج هذا الوسم تظهر في شريط العنوان 

الخاص بالمتصفح » وهو وسم لايقبل اي وسم داخله (الوسوم التنسيقيه).وبناء علي ذلك فان عنوان 
صفحتنا سيكون " صور عن مدن ليبا ". 

</head> 


هذا الوسم يدل علي نهاية الجزء الاول من ملف 1١1‏ او منطقة الرأس. 


<body bgcolor= azure > 

من هنا يبدأ الجزء الثاني والاخير من ملف 1"1 الذي يسمى <0> او الجسم » ويحمل المواد 
المراد عرضها في صفحة ۸"1 من صور ومواضيع او البيانات هدف الصفحه» ووسم بدايه الجسم 
اضيفت لها خاصية تغيير لون خلفية الصفحه (9٤010١‏ وهي اختصار للمصطlح back gr0U.d‏ 
00٣‏ »و غالبا تكتب الخصائص في وسم البدايه لكل وسم › والجدول التالي يوضح فكرة كتابت هذا 


الخصائص من اليسار الس اليمين : 


القيمه الخاصيه الوسم 


Azure 


#FOFFFF 


body bgcolor 


الفكره من هذا الجدول هي ان كتابة الوسم اولا ثم يليه مع ترك مسافه كتابت الخاصيه ثم بعد 
الخاصيه نضع علامة "=" وبعده قيمة الخاصيه وهي في مثالنا 21۲8 او f؟؟؟0؟#‏ وهذا يدل علي 
ان الخاصيه 0010۲( تقبل قيم من نوعين ام ان تكتب اسم اللون مباشر او ان تكتب مرادف للون 
بصيغة رقم سادس عشري مسبوقا ب # لتعريف المتصفح بان الرقم يدل علي لون ٬لفرق‏ بين 
الطريقتين ان استخدام الاسماء محدود لايتعدى 32 لون »ما الرموز تمكنك من التدرج في الالون 
والتحكم في شدتها وتصل حتي 216 لون. 


<marquee bgcolor=#9932CC> <font size=+2 color=# FF7F50> pul 

2000 </font> </marquee> 

في الوسم السابق طلب منك شريط متحرك به الخصائص التاليه ذو خلفيه #9932٣٣‏ ولون خط 
#۴۴0 وحجم خط 2+ وتكتب في محتوى الوسم اسمك ورقمك الدراسي ٬ناتي‏ الى الجدول 
ونكتب الخصائص اولا ثم نكتب قيم الخصائص حسب ماطلب منك في السؤال ومن خلال الخصائص 

نحدد عدد الوسوم المشتركه في الامر البرمجي : 

القيمه الخاصيه الوسم 

marquee bgcolor #9932CC 


font color #FF7FESO 
size 2 


نلاحظ ان الخاصيه (٥010٣‏ تعتبر خاصيه مشتركه نظرا لانها تستعمل مع اكثر من وسم.اذا 
نحتاج لدمج وسم أ١٣0]‏ و الوسم ۲)108€ه.٧‏ » بدايه نكتب وسم الشريط متحرك 1€6€ 1٣4۲)‏ 
ونضيف له الخاصيه (3٤٥010٣‏ والغرض منها في هذا الموقع تغيير خلفية الشريط وحسب السؤال 
يكون اللون الارجواني وبين بداية ونهاية الوسم ع16ا)۲ه0 والتي تسمى المحتوى نكتب داخله 
الوسم ا101 لنتحكم في لون وحجم الخط بنفس الطريقه نكتب الوسم ا٣10‏ ثم مسافه ثم الخاصيه 
1٥‏ لتغيير حجم الخط وتاخذ قيم من (2- 1- »...» 3,4) ويليه مسافه ونكتب الخاصيه ٤٥010٣‏ 


لتغيير لون الخط وهي تاخذ اسماء او ارقام سادس عشرى نفس الخاصيه 09010۲ . 


<h3><u><p align=center> oi السلام عليكم ورحمة‎ </p> > /u< >/ ۸3< 


المطلوب في هذا الوسم كتابت كلمة السلام عليكم ورحمة الله في منتصف الصفحه وتحته خط 
وبحجم 13 » اولا نقوم بكتابة الخصائص المرادفه لهذه الشروط : 


القيمه 


center 


Uu - 


الوسم ۸3 وسم حجم العنوان وياخذ قيم كلاتي (۸1...15) اكبر حجم عنوان ۸1 واصغرها 16 
ايضا فهو وسم لايحوي خصائص دمج مع الوسم 0 لنتمكن من وضع الجمله في منتصف الصفحه من 
خلال اعطاء الخاصيه 1191١‏ القيمه C6١6٣‏ » اما الوسم لا مسؤول عن تسطير الجمله ايضا يعتبر 


من الوسوم التي لاخصائص لھها. 


<h5><font color= DarkBlue><p align=center> lul jına </p> 

</font> </h5> 

المطلوب في هذا الوسم كتابت العنوان "مدن ليبيا" في منتصف الصفحه وبلون خط عu[طdarkb‏ 
وبحجم عنوان ۸5 وهذايعني دمج ثلاث وسوم ڪلاتي: 


القيمه 


center 
font color darkblue 


الوسم ۸5 وسم حجم العنوان وياخذ قيم كلاتي (1۸1...15) اكبر حجم عنوان ۸1 واصغرها 16 
ايضا فهو وسم لايحوي خصائص دمج مع الوسم 0 لنتمكن من وضع الجمله في منتصف الصفحه من 
خلال اعطاء الخاصيه 119۸ القيمه ٣©أ€‏ » اما الوسم مسؤول عن تسطير الجمله ايضا يعتبر من 


الوسوم التي لاخصائص لها. 


<font size=+2 color=#006400><p align=right> <i> |i يمکنڪك في‎ 

<أf0n/>‏ <ص/> <1/> الموقع مشاهدة صور عن مدن ليبيا 

من خلال التمعن في الكود السابق يتضح انه تم تغيير حجم الخط من خلال الخاصيه 5126 باخذ قيمه 
2+ ولون خط 006400 ويتحکم فيه من الخاصيه C010۲‏ علما بان الخاصيه 512€, C010٣‏ تتبع 
الوسم أ٣10‏ » اما لتحكم في مكان وضع الجمله فتستخدم الخاصيه 1191 باعطائها قيمه ٣6ا1‏ °6 


التابع للوسم ‏ »› ويمكن استخدام الجدول لتسهيل ذلك: 


القيمه 


align center 
1 +2 
006400 


<h3><p align=right> aiرد‎ aiıın</p> </h3> 

ان الغرض المحتوى "مدينة درنه" داخل الوسمين السابقين هوالحصول على عنوان بحجم 13 »› 
كذلك وضع المحتوى على اليمين باستخدام الوسم ٥‏ . 

<img src=der.jpg align=right height=100 width=200> 

الوسم 1١‏ يعتبر وسم فردي اي له وسم بدايه من دون نهايه» وهو اهم وسم للتعامل مع الصور 


يتبعه الخاصيه 5۲١‏ وهي اختصار لكلمة 5018€8 اي مصدر استيراد الصوره قيمة هذه الخاصيه 


عباره عن مسار "3" وجود الصوره › وفي حالتنا كتبنا اسم الصوره "16١"‏ متبوع بنوع الصوره 


او امتداد الصوره "16١.]9"‏ بدون كتابة مسار لان الصوره مخزنه في نفس مكان صفحة اصصأط 


اما عن تحديد موقع الصوره فهو محدد بالخاصيه align‏ وهي تعتبر خاصيه مشتر ڪه اي تستعمل 
مع اكثر من وسم واخذت القيمه أ۸ ل]۲ لتصطف الصوره علي يمين الصفحه . ايضا من ضمن 
خصائص هذا الوسم امكانية التحكم في طول وعرض الصور باعطاء قيم لخاصيتي ( أطواذم"ط 
اWd,)‏ اما نوع قيم هذه الخصائص فهي اما نسب مئویه مثل (%18 او..%60 ) او ان تاخذ قیم 


بالبكسل مثل ماورد لدينا كانت الصوره بطول 100 بكسل وبعرض 200 بكسل . 

>13/< >þ/<مaiıı‏ اlبيضl«ء <h3><p align=right>‏ 
ان الغرض المحتوى "مدينة البيضاء" داخل الوسمين السابقين هوالحصول على عنوان بحجم 13 »> 
كذلك وضع المحتوى على اليمين باستخدام الوسم 8 . 


<img src=kof.jpg border=5 align=right height=100 width=200> 


هذا الجمله البرمجيه مطابقه لوسم مدينة درنه مع تغيير اسم الصوره في الخاصيه 5١١‏ الي "k0۴"‏ 
متبوع بنوع الصوره او امتداد الصوره "0۴.9" بدون كتابة مسار لان الصوره مخزنه في نفس 
مكان صفحة ]إا اما عن تحديد موقع الصوره فهو محدد بالخاصيه 31191١‏ وهي تعتبر خاصيه 
مشتركه اي تستعمل مع اكثر من وسم واخذت القيمه أ۸ ]۲ لتصطف الصوره علي يمين الصوره 
السابقه . ايضا فان طول وعرض الصور (1أW1d,‏ اط1igعط)فكانت‏ الصوره بطول 100 بكسل 
وبعرض 200 بكسل . اما الخاصيه (0۲06٣‏ فهي تستخدم لاعطاء اطار للصوره يختلف حجمه حسب 
قيمة الخاصيه وهي تاخذ قيم من صفر في حالة عدم الرغبه في اطار الي 6 في حال اكبر حجم 
للاطار. 


<h3><p align=right> aربطز‎ aiıın</p> </h3> 


ان الغرض المحتوى "مدينة طبرق" داخل الوسمين السابقين هوالحصول على عنوان بحجم 13 »> 
كذلك وضع المحتوى على اليمين باستخدام الوسم 8 . 


<img src=tob.jpg align=right height=100 width=200> 


هذا الجمله البرمجيه مطابقه لوسم مدينة درنه مع تغيير اسم الصوره في الخاصيه S١٣١‏ الي "05" 
متبوع بنوع الصوره او امتداد الصوره "00.9" بدون كتابة مسار لان الصوره مخزنه في نفس 
مكان صفحة 11١1‏ اما عن تحديد موقع الصوره فهو محدد بالخاصيه 119١‏ واخذت القيمه اوا 
لتصطف الصوره علي يمين الصوره السابقه . ايضا فان طول وعرض الصور ( اقام 
Wİ‏ ,)فکانت الصوره بطول 100 بکسل وبعرض 200 بکسل . 


< BF=<Dr=> < DF=>< Dr=><DBF=> 


يقصد من تكرار الوسم آ٥‏ خمس مرات هو ترك خمس اسطر فارغه بعد اخر صوره »وهو وسم فردي 
> حيث ان كل وسم منها يعطي سطر جديد فارغ . 


الخميس <p align = center> <font color=#AG32CC size=+1>2010/10/19‏ 
</font> </p>‏ 
اما في هذه الحاله نرى ان هذه الشيفره وضع التاريخ واليوم في منتصف الصفحه ايضا بلون وحجم 


خط معين ٬تتضح‏ من خلال الجدول : 


القيمه حاص الودسم 
P align center‏ 

font Size +1 

font color AG32CC 


من الجدول يتضح ان محتوى الوسم 0 الذي يحمل قيمة ٥861۸6٣‏ لاخاصيه ۵1191۸ كان عبار عن 
الوسم أ01 وذلك لغرض التحكم في الحجم من الخاصيه 1+=51286 ولون خط المحتوى 
63۳° من خلال الخاصیه .٥C010۲‏ 


<ه/<الذهاب الي الصفحه التlليa <a href=libya.html>‏ 
الغرض من هذا الكود هو تكوين رابط ينقلك الي الصفحه ه1109 ولذلك نستخدم الوسم 4 
ونضيف له الخاصيه 1۲۴۴ التي تستدعي الصفحه المراد الانتقال اليها وقيمتها يجب ان تكون اسم 
الصفحه متبوعه بالامتداد 1۳1 بهاذا الشكل آ٣ا1.ه۷ط1]‏ ما اسم الرابط يكتب في محتوى الوسم 
وهو "الذهاب الي الصفحه التاليه" . 

</body> 

هنا نصل الي نهاية الوسم 00Q¥‏ ولكتابة وسم نهايه نكتب اسم الوسم مسبوق بعلامة"/" » مما يدل 
علي ان الاوسمه السابقه كانت محتوى للوسم 000¥ . 


</html> 
ايضا فهي تضم كل الوسوم السابقه.‎ ۸١1 اما هنا فهي نهاية ملف‎ 


شرح كود الصفحه 1.154: 


<html> 


هذا الوسم يدل المتصفح علي بداية ملف 1۳1 ويسمى وسم بداية ملف اهاط . 


<head> 
وهو يحمل تفاصيل والعنوان الخاصه بالصفحه » ايضا‎ » 1١1 يمثال هذا الوسم الجزء الاول من ملف‎ 


هذا وسم بداية 24ط . 
<ع[اiا/>‏ خريطة تيبا <ع][ا1ا> 


اما هذا الوسم يستخدم في وضع عنوان للصفحه» وناتج هذا الوسم تظهر في شريط العتوان الخااص 
بالمتصفح .وبناء علي ذلك فان عنوان صفحتنا سيكون " خريطة ليبيا ". 
</head>‏ 


هذا الوسم يدل علي نهاية الجزء الاول من ملف 1١1‏ او منطقة الرأس »وفي نهاية الوسم لابد من 


وضع علامة "/" قبل اسم الوسم . 


<body bgcolor= beige > 


من هنا يبدا الوسم <body>‏ > ويحمل البيانات عرضها في صفحة ]اصhtm‏ من صور ومواضیيع او 


البيانات هدف الصفحه» اضيف له خاصية تغيير لون خلفية الصفحه 09٤٥010٣‏ واخذت قيمه 66٥196‏ 


<img src=lib.jpg height=100% width=100% border=5> 


وسم 119 يستخدم لتحكم في عرض الصور وله خصائص منها الخاصيه S۲٣١‏ تستخدم لاستيراد 
صوره الي الصفحه ونكتب اسم الصوره 110 متبوعه بالامتداد 9[ . بعدها يتم التحكم في ارتفاع 
الصوره داخل الصفحه باستخدام الخاصيه ا1619 واعطيت قيمه %100 لتكون بارتفاع الصفحه 


كامله» اما العرض استخدمت له الخاصيه W10١‏ اعطيت له قيمه %100 ليكون بعرض الصفحه 


كامله» ايضا اضيفت للصور اطار بحجم 5 من خلال الخاصيه bord©r‏ . 
</body>‏ 


نهاية الوسم 0¥( ولكتابة وسم نهايه نكتب اسم الوسم مسبوق بعلامة"/" » مما يدل علي ان الاوسمه 
السابقه كانت محتوى للوسم [0Q¥‏ . 
</html>‏ 


اما هنا فهي نهاية ملف 1۳1 ايضا فهي تضم كل الوسوم السابقه بما فيها الوسوم (0Q7‏ ومحتواه 


من وسوم » والوسم head‏ ومحتواه من وسوم . 


